<template>
  <div
    style="padding:5px"
    v-if="order"
  >
    <el-collapse
      v-model="activeName"
      accordion
    >
      <el-collapse-item
        title="基本信息"
        name="1"
      >
        <table class="striped-border-table">
          <tr>
            <th>订单编号</th>
            <td>{{ order.serialNumber }}</td>
          </tr>
          <tr>
            <th>商品</th>
            <td>{{ order.orderGoods && order.orderGoods.name }}</td>
          </tr>
          <tr>
            <th>商品类型</th>
            <td>
              {{
                order.orderGoods &&
                order.orderGoods.goodsType &&
                order.orderGoods.goodsType.desc
              }}
            </td>
          </tr>
          <tr>
            <th>数量</th>
            <td>{{ order.count }}</td>
          </tr>
        </table>
      </el-collapse-item>
      <el-collapse-item
        title="物流信息"
        name="2"
      >
        <el-table
          ref="expressTable"
          :data="order.deliverInfos | filterDevliery"
          style="width: 100%"
          @expand-change="onExpandChange"
        >
          <el-table-column type="expand">
            <template slot-scope="scope">
              <span>若未查到物流信息，请检查物流单号及物流公司是否正确，或</span>
              <el-button
                type="text"
                @click="onExpandChange(scope.row)"
              >刷新物流</el-button>
              <el-timeline v-loading="expressLoading">
                <el-timeline-item
                  :type="index == 0 ? 'success' : 'info'"
                  v-for="(item, index) in scope.row.express"
                  :key="index"
                  :timestamp="item.time"
                >
                  {{ item.desc }}
                </el-timeline-item>
              </el-timeline>
            </template>
          </el-table-column>

          <el-table-column label="物流公司">
            <template slot-scope="scope">
              {{ deliveryCompany(scope.row.deliverCode) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="deliverNumber"
            label="物流单号"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="deliverContact"
            label="收货人"
          >
          </el-table-column>
          <el-table-column
            prop="deliverContactMobile"
            label="联系电话"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="deliverAddress"
            label="地址"
            width="180"
          >
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item
        title="订单状态日志"
        name="3"
      >
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in logs"
            :key="index"
            :type="index === 0 ? 'success' : 'info'"
            :timestamp="item.createTime"
          >
            {{ item.state.desc }}
          </el-timeline-item>
        </el-timeline>

      </el-collapse-item>
      <el-collapse-item
        v-if="order.photoZip"
        title="图片下载"
        name="4"
      >
        <el-link
          type="primary"
          :href="order.photoZip"
          target="_blank"
        >点击下载</el-link>
      </el-collapse-item>
    </el-collapse>
  </div>
  <div v-else>订单不存在</div>
</template>

<script>
import mobileOrderApi from '@/api/mobileOrder'
import expressApi from '@/api/express'
import { getDeliveryCompany } from '@/utils/utils'
export default {
  props: ['code'],
  name: 'info',
  components: {},
  data () {
    return {
      data: null,
      activeName: '1',
      order: null,
      logs: [],
      expressLoading: false
    }
  },
  filters: {
    filterDevliery (deliveryInfos) {
      return (
        deliveryInfos &&
        deliveryInfos.filter((i) => i.deliverCode && i.deliverNumber)
      )
    }
  },
  created () {
    this.getOrderDetail()
  },
  methods: {
    onExpandChange (row, expandedRows) {
      this.expressLoading = true
      expressApi
        .query(row.deliverCode, row.deliverNumber)
        .then((res) => {
          row.express = res.data
        })
        .finally(() => {
          this.expressLoading = false
        })
    },
    deliveryCompany (code) {
      return getDeliveryCompany(code)
    },
    /**
     * 查询订单详情
     */
    getOrderDetail () {
      mobileOrderApi.getByCode(this.code).then((res) => {
        if (res.data) {
          this.order = Object.assign({}, res.data.order)
          this.logs = Object.assign({}, res.data.logs)
        }
      })
    }
    /**
     * 查询订单相关流水信息
     */
  }
}
</script>

<style lang="scss">
.striped-border-table {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  width: 100%;
  margin: 10px 0;
  font-size: 13px;
  border-collapse: collapse;
  th,
  td {
    border: 1px solid #d3dce6;
    line-height: 20px;
    padding: 5px;
    text-align: center;
  }
  th {
    width: 40%;
  }
  tr:hover {
    background-color: #f5f5f5;
  }
}

.image-uploader {
  margin: 5px 10px;
}

.photo {
  width: 180px;
  height: 180px;
}
</style>
